<template>
	<view class="companyCredit">
		<!-- 顶部导航 -->
		<div class="head">
			<span class="headFont">财务系统</span>
		</div>

		<!-- 主内容区 -->
		<div class="main">
			<!-- 顶部统计卡片 -->
			<div class="title">
				<div class="title1">
					<p class="titleFont">未清总额</p>
					<p class="titleMoney">¥{{ sumCost }}</p>
				</div>
			</div>

			<!-- 筛选区 -->
			<!-- <div class="select">
				<div class="select1">
					<button class="item">项目搜索</button>
					<button class="item">元件搜索</button>
				</div>
			</div> -->

			<!-- 搜索框 -->
			<div class="search-box">
				<input type="text" placeholder="      搜索客户/订单" class="search-input" />
			</div>

			<!-- 未清账款列表 -->
			<div class="list">
				<!-- 逾期账款 -->
				<div class="listItem" v-for="(item, index) in items">
					<div class="up">
						<div class="name">
							<span class="namefont">{{ item.name }}</span>
							<span style="font-size: 12px; color: #a2a2a2">--{{ item.project }}</span>
						</div>
						<div class="time">
							<span class="number">{{ item.serialNumber }}</span>
							<span class="timeDate">{{ new Date(item.createTime).toISOString().split('T')[0] }}</span>
						</div>
					</div>
					<div class="down">
						<div class="money">
							<p class="moneyFont">¥{{ item.costFront }}</p>
							<p class="time">操作人:{{ item.users }}</p>
						</div>
						<button
							class="inputButton buttonCollect animate__animated animate__headShake"
							:class="{ nodisplay: item.nodisplay, animate__bounceOutLeft: item.exitLeft }"
							@click="collect(index)"
						>
							付款
						</button>
						<button
							class="inputButton buttonPublic animate__animated animate__backInRight"
							:class="{ nodisplay: !item.nodisplay }"
							@click="collectsAll(item, '核销-公户')"
						>
							公户
						</button>
						<button
							class="inputButton buttonCash animate__animated animate__backInRight"
							:class="{ nodisplay: !item.nodisplay }"
							@click="collectsAll(item, '核销-现金')"
						>
							现金
						</button>
						<button class="inputButton buttonCancel animate__animated animate__backInRight" :class="{ nodisplay: !item.nodisplay }" @click="cancel(index)">取消</button>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
import { request } from '../../request';
import { debounce } from 'lodash';
export default {
	data() {
		return {
			nodisplay: false,
			exitLeft: false,
			items: null,
			sumCost: null,
			// 防抖函数
			debouncedFunction: null
		};
	},
	methods: {
		collect(index) {
			// 动画设置
			this.items[index]['exitLeft'] = true;
			// 手动更新
			this.$set(this.items, index, this.items[index]);
			setTimeout(() => {
				this.items[index]['nodisplay'] = true;
				this.$set(this.items, index, this.items[index]);
			}, 300);
			this.items[index]['exitLeft'] = false;
			this.$set(this.items, index, this.items[index]);
		},
		cancel(index) {
			// 动态动画设置
			this.items[index]['nodisplay'] = false;
			this.$set(this.items, index, this.items[index]);
		},

		// 请求方法
		payMentMethodRequest(value) {
			request('admin/updatePaymentMethod', value, 'POST').then((res) => {
				if (res.data.code != 200) {
					this.$message.error('   ' + res.data.msg);
					return;
				}
				this.$message.success('还款成功！');
				setTimeout(() => {
					location.reload();
				}, 500);
			});
		},
		// 公户收款
		collectsAll(item, data) {
			const value = {
				id: item.id,
				paymentMethod: data
			};
			this.debouncedFunction(value);
		}
	},
	onShow() {
		request('public/selectCreditComponent', {}, 'GET').then((res) => {
			if (res.data.code != 200) {
				this.$message.error('   ' + res.data.msg);
				return;
			}
			this.items = res.data.data;
			for (var i = 0; i < this.items.length; i++) {
				this.items[i]['nodisplay'] = false;
				this.items[i]['exitLeft'] = false;
			}
			console.log(this.items);
		});
		request('admin/selectComponentPartCreditCost', {}, 'GET').then((res) => {
			if (res.data.code != 200) {
				this.$message.error('   ' + res.data.msg);
				return;
			}
			console.log(res.data.data);
			this.sumCost = res.data.data;
		});
	},
	onLoad() {
		this.debouncedFunction = debounce((value) => this.payMentMethodRequest(value), 700);
	}
};
</script>

<style scoped>
/* 基础样式重置 */
.companyCredit,
.companyCredit * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.companyCredit {
	width: 100%;
	max-width: 100vw;
	min-height: 100vh;
	background-color: #f5f7fa;
	color: #333;
	overflow-x: hidden;
}

/* 顶部导航 */
.head {
	width: 100%;
	height: 60px;
	background: linear-gradient(135deg, #1976d2, #2196f3);
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	position: relative;
	z-index: 10;
}

.headFont {
	color: white;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 1px;
}

/* 主内容区 */
.main {
	padding: 16px;
	padding-bottom: 80px;
}

/* 顶部统计卡片 */
.title {
	background-color: white;
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.title1 {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.titleFont {
	color: #666;
	font-size: 14px;
	margin-bottom: 8px;
}

.titleMoney {
	color: #1976d2;
	font-size: 24px;
	font-weight: 700;
}

/* 筛选区 */
.select {
	background-color: white;
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.select1 {
	display: flex;
	gap: 10px;
}

.select1 .item {
	flex: 1;
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid #e0e0e0;
	background-color: #f9f9f9;
	color: #555;
	font-size: 14px;
	text-align: center;
	transition: all 0.2s;
}

.select1 .item:active {
	background-color: #e3f2fd;
	border-color: #bbdefb;
	color: #1976d2;
}

/* 搜索框 */
.search-box {
	margin-bottom: 16px;
}

.search-input {
	height: 44px;
	background-color: white;
	border: 1px solid #e0e0e0 !important;
	font-size: 14px;
	transition: all 0.2s;
	border-radius: 5%;
	padding: 10px;
}

.search-input:focus {
	border-color: #1976d2 !important;
}

.search-icon {
	font-size: 16px;
}

/* 未清账款列表 */
.list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.listItem {
	background-color: white;
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s;
}

.listItem:active {
	transform: scale(0.98);
}

.up {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px dashed #eee;
}

.namefont {
	font-size: 16px;
	font-weight: 600;
	color: #333;
}

.time {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.number {
	font-size: 12px;
	color: #888;
	margin-bottom: 4px;
}

.timeDate {
	font-size: 12px;
	color: #aaa;
}

.down {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.moneyFont {
	font-size: 18px;
	font-weight: 700;
	color: #f44336;
	margin-bottom: 4px;
}

.time {
	font-size: 12px;
	color: #888;
}

.inputButton {
	padding: 8px 16px;
	background-color: #4caf50;
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
}

.buttonCollect:active {
	background-color: #3d8b40;
	transform: scale(0.95);
}
.buttonPublic:active {
	background-color: #00008b;
	transform: scale(0.95);
}
.buttonCancel:active {
	background-color: #8b2324;
	transform: scale(0.95);
}
.buttonCash:active {
	background-color: #3d8b40;
	transform: scale(0.95);
}

/* 不显示 */
.nodisplay {
	display: none;
}

.buttonPublic {
	background-color: #1976d2;
	padding: 25px 10px;
}
.buttonCash {
	background-color: #4caf50;
	padding: 25px 10px;
}
.buttonCancel {
	background-color: #d20003;
	padding: 25px 10px;
}
.buttonCollect {
	background-color: #4caf50;
}

/* 响应式调整 */
@media (max-width: 320px) {
	.main {
		padding: 12px;
	}

	.titleMoney {
		font-size: 22px;
	}

	.moneyFont {
		font-size: 16px;
	}

	.inputButton {
		padding: 6px 12px;
	}
}
</style>
